<template>
  <div>
    <h1 class="project-title">
      扬尘设备1 工地地址:瓶窑镇崇化安置房二期项目 黄湖镇中心小学改扩建项目
    </h1>
    <div class="Echarts">
      <div v-for="(item, index) in names" class="chart-item" :key="item">
        <div :class="'chart-content chart-' + index"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

const MAX_COUNT = 5

export default {
  data() {
    return {
      names: ['PM2.5', 'PM10', 'TSP', '噪音'],
      pm2Data: [26.3],
      pm10Data: [29.1],
      TSPData: [75.4],
      noiseData: [30.3],
      timeList: ['20秒前', '15秒前', '10秒前', '5秒前', '当前'],
      danWei: 'ug/m³',
      danWei1: 'dB',
    }
  },
  methods: {
    initChart(index, list) {
      var chartDom = document.querySelector('.chart-' + index)
      console.log(chartDom)
      var myChart = echarts.init(chartDom)
      var option

      if (!this['lastCount-' + index]) {
        this['lastCount-' + index] = [
          parseInt(list[0] - 2),
          parseInt(list[0] + 2),
        ]
      }
      option = {
        title: {
          text: this.names[index],
          padding: [20, 0, 0, 40],
        },
        xAxis: {
          type: 'category',
          data: this.timeList,
        },
        yAxis: {
          type: 'value',
          min: this['lastCount-' + index][0],
          max: this['lastCount-' + index][1],
        },
        series: [
          {
            data: list,
            type: 'line',
          },
        ],
      }
      option && myChart.setOption(option)
    },
    mockData(list) {
      list.push(Number((list[0] + Math.random() - 0.5).toFixed(2)))
      if (list.length > MAX_COUNT) {
        list.shift()
      }
    },
  },
  created() {
    this.dataList = [this.pm2Data, this.pm10Data, this.TSPData, this.noiseData]
    for (let index = 0; index < this.names.length; index++) {
      for (let j = 1; j < MAX_COUNT; j++) {
        this.mockData(this.dataList[index])
      }
    }
  },
  mounted() {
    for (let index = 0; index < this.names.length; index++) {
      const list = this.dataList[index]
      this.initChart(index, list)
      setInterval(() => {
        this.mockData(list)
        this.initChart(index, list)
      }, 5000)
    }
  },
}
</script>

<style scoped lang="less">
* {
  overflow: hidden;
}
.project-title {
  margin: 0.5rem 0.7rem;
  font-size: 0.3rem;
  font-weight: 600;
}
.Echarts {
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
  padding: 0 0.2rem;
  box-sizing: border-box;
  .chart-item {
    width: 50%;
  }
  .chart-content {
    width: 100%;
    height: 3.5rem;
  }
}
</style>
